<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    // * 使用promise封装基于定时器的异步
	// {
	// 	const p = new Promise(resolve=>{
	// 		setTimeout(()=>{
	// 			let num = 100;
	// 			resolve(num);
    //         })
    //     });
	// 	p.then(value=>{
	// 		console.log(value);
    //     })
    // }

    // * 使用promise封装`ajax`异步请求
    function ajax(){
		return new Promise(resolve=>{
			const xhr = new XMLHttpRequest();
			xhr.responseType = "json";
			xhr.open("get","https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=1&k=3607401");
			xhr.setRequestHeader("x-client-info",'{"a":"3000","ch":"1002","v":"5.2.1","e":"17496956322891835840135169"}');
			xhr.setRequestHeader("x-host","mall.film-ticket.film.list")
			xhr.send();
			xhr.onload = function(){
				resolve(xhr.response);
            }
        })
    }
	ajax().then(value=>{
		document.querySelector("#root").innerHTML = value.data.films.map(item=>(`
		    <div>
		        <img height="100" src="${item.poster}" alt="">
		        <h3>${item.name}</h3>
		        <hr/>
            </div>
		`)).join("")
		console.log(value.data.films);
    });
</script>
</html>